<template>
	<view class="">
		<div class="user">
			<!-- 			<div class="img">
				<image :src="userInform.avatar" mode="widthFix"></image>
			</div> -->
			<!-- <image class="bc" src="../../static/index/baixian.png" mode="widthFix"></image> -->
		</div>
		<!-- 		<view class="page-main">
			<liu-slide-img :current="current" :list="list" :type="2" :autoplay="autoplay" :interval="interval"
				@change="change" @click="click"></liu-slide-img>
		</view> -->
		<div class="level">
			<image :src="'../../static/level/'+current+'.png'" mode="widthFix"></image>
		</div>
		<div class="box">
			<div class="triangle"></div>
			<image style="width: 100%;" :src="userInform.level.introduceImg" mode="widthFix"></image>
		</div>
	</view>
</template>

<script>
	import liuSlideImg from '../../components/liu-slide-img/liu-slide-img.vue'
	export default {
		components: {
			liuSlideImg
		},
		data() {
			return {
				list: ["1", "2", "3", "4", "5", "6", "7", "8"],
				title: "尊贵掌门",
				autoplay: false,
				interval: 3000,
				userInform: {},
				current: 0,
				qyurl: "../../static/zl.png"
			}
		},
		onShow() {
			this.userInform = uni.getStorageSync("userInform")
			// let a = 
			this.current = this.list[parseInt(this.userInform.level.code) - 1];
		},
		methods: {
			//当前轮播索引
			change(e) {
				console.log('==========', e)
				// if (e === 1) {
				// 	this.title = "尊贵掌门"
				// 	this.qyurl = "../../static/zm.png"
				// } else if (e === 0) {
				// 	this.title = "荣耀宗师"
				// 	this.qyurl = "../../static/zs.png"
				// } else {
				// 	this.title = "英勇长老"
				// 	this.qyurl = "../../static/zl.png"
				// }
			},
			//点击轮播
			click(e) {
				console.log('点击轮播', e)
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #ffffff;
		overflow: hidden;
		/* 禁止页面滚动 */
	}

	.user {
		transform: translateY(70rpx);

		.img {
			width: 130rpx;
			height: 130rpx;
			margin: auto;
			border-radius: 50%;
			border: 10px solid rgba(255, 255, 255, 0.1);

			image {
				border-radius: 50%;
				width: 100%;
			}

		}

		.bc {
			transform: translateY(-50%);
			width: 100%;
		}

	}

	.page-main {
		transform: translateY(30rpx);
	}

	.level {
		background-color: #222a46;
		image {
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			margin-bottom: 40px;
		}
	}

	.box {
		// transform: translateY(-30rpx);
		padding-bottom: 60rpx;
		width: 100%;
		background: #FFFFFF;
		filter: drop-shadow(0 0 20rpx rgba(10, 10, 10, 0.4));
		text-align: center;
		// height: 100vh;

		.triangle {
			// width: 100%;
			z-index: 100;
			position: absolute;
			top: -20px;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 20px solid #ffffff;
			/* 可以设置为任何颜色 */
		}

		// &::before {
		// 	content: "";
		// 	display: block;
		// 	width: 0rpx;
		// 	height: 0rpx;
		// 	margin: auto;
		// 	transform: translateY(-80%);
		// 	border-top: 5px solid transparent;
		// 	border-right: 15px solid transparent;
		// 	border-left: 15px solid transparent;
		// 	border-bottom: 20px solid #FFFFFF;
		// 	border-radius: 10rpx;
		// }

		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #070E2F;
			line-height: 44rpx;
			margin-top: 20rpx;
		}

		.text {
			margin-top: 30rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #070E2F;
			line-height: 34rpx;
		}

		.ul {
			display: flex;
			justify-content: start;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;
			margin-top: 30rpx;

			.li {
				width: 25%;
				margin-bottom: 30rpx;
				text-align: center;

				image {
					width: 100rpx;
				}

				.name {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #070E2F;
					margin-top: 15rpx;
				}
			}
		}

		.ul2 {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 90%;
			margin: auto;

			.bd {
				width: 48%;
				margin-top: 30rpx;
				padding: 1px;
				border: 1px solid #562b0a;
				position: relative;

				// 标
				.top {
					position: absolute;
					top: 0;
					right: 0;
					background-image: linear-gradient(to right, #3e403f, #636363);
					color: #ddc0a3;
					padding: 10rpx;
					font-size: 24rpx;
					width: 160rpx;
					border-radius: 50rpx 100rpx 0 800rpx;
					text-align: center;
				}
			}

			.li {
				border: 1px dashed #562b0a;
				padding: 0rpx 30rpx;
				box-sizing: border-box;
				text-align: left;


				.money {
					padding-top: 10rpx;

					text {
						font-weight: 700;
						color: #562b0a;
						font-size: 70rpx;
					}
				}

				.text {
					margin-top: 5rpx;
					padding-bottom: 10rpx;
				}


			}
		}
	}
</style>